<?php 
drupal_add_css("misc/custom.css");
 drupal_add_css("http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css", array('type' => 'external'));
  drupal_add_js("http://code.jquery.com/jquery-1.10.2.js", array('type' => 'external'));
  drupal_add_js("http://code.jquery.com/ui/1.10.4/jquery-ui.js", array('type' => 'external'));
?>
<script>
CACHE = {};
//Mouse inside tab
MOUSE_INSIDE=false;
function click_occur(event)
{
	if (event.currentTarget.value == "")
	{
		event.preventDefault();
		
		jQuery("#country_city_tabs").show();
		jQuery("#close_tab_btn").show();
	}
}
function key_up_occur(event)
{
	if (event.currentTarget.value == "")
	{
		event.preventDefault();
		jQuery("#country_city_tabs").show();
		jQuery("#close_tab_btn").show();
	}
	else
	{
		jQuery("#country_city_tabs").hide();
		jQuery("#close_tab_btn").hide();
	}
}
function blur_occur(event)
{
	if (!MOUSE_INSIDE)
	{
		jQuery("#country_city_tabs").hide();
		jQuery("#close_tab_btn").hide();
	}
}
//Query to php
function q(params,on_done)
{
	//Query parameters
	var p = {};
    p.source = params;
	var link="/controller/hotel_search.php";
	jQuery.ajax({url:link,data:p,dataType:"json"}).done(on_done);
}
jQuery(document).ready
(
function()
{
	console.log(jQuery("#country_city_tabs"));
	jQuery("#close_tab_btn").button({icons:{primary:"ui-icon-closethick"}})
	//jQuery("#close_tab_btn").width(jQuery("#close_tab_btn").width()/2)
	jQuery("#country_city_tabs").tabs();
    jQuery(window).resize(function()
    
    {
        //jQuery("#country_city_tabs").width(jQuery("#location_hotel_id").width() * 2);
        var width = jQuery("#country_city_tabs").position().left + (jQuery("#country_city_tabs").width() - jQuery("#close_tab_btn").width());
        var height = jQuery("#country_city_tabs").position().top 
        //jQuery("#close_tab_btn").offset({top:height,left:width});
    })

	jQuery("#close_tab_btn").click(function(e){jQuery("#close_tab_btn").hide();jQuery("#country_city_tabs").hide()})
	
	jQuery(".country").button().click(function(e)
	{
		var local = jQuery(this)[0].id.replace("-",",").replace("_"," ");
		jQuery("#location_hotel_id").val(local);
	}
	);
    

	jQuery("#country_city_tabs").blur(function(e){console.log("Hello")})
	
	jQuery("#country_city_tabs").mouseover(
		function(e)
		{MOUSE_INSIDE=true;
		});
	
	
	jQuery("#country_city_tabs").mouseleave(
		function(e)
		{MOUSE_INSIDE=false;
		});
	jQuery("#location_hotel_id").click(click_occur)
	jQuery("#location_hotel_id").keyup(key_up_occur)
	jQuery("#location_hotel_id").blur(blur_occur)
	
	

	
	jQuery("#location_hotel_id").autocomplete
	({
		source:function(request,response)
		{
			if ( request.term in CACHE)
			{
				response(CACHE[request.term])
				return;
			}
			else
			{
				q(request.term,function(src_data)
				{
					CACHE[request.term]=src_data;
					response(src_data);
				}
				);
				
			}
		}
	}
	);
    jQuery(window).resize();
    jQuery("#country_city_tabs").hide();
	jQuery("#close_tab_btn").hide();
}
);
</script>
<div class="search_area">
<form action="/controller/search.php" method="POST"/>
<label for="location_hotel_id">
<div class="strong_text" style="font-size:24px;">Explore</div>
<div class="strong_text" >Find a Chinese friendly hotel in over 250 cities and 32 countries</div>
</label>
<div>
<input id="location_hotel_id" name="location_hotel_name" class="search_field"></input>
<div id="catalogues" class="catalogues">All</div>
</div>
<input type="submit" class="search_btn"></input>
</form>

<div id="country_city_tabs" style="width:100%">
	<ul>
		<?php
			foreach($continents as $ind=>$continent)
			{
		?>
				<li><a href="#<?=str_replace(" ","_",$continent[0])?>"><?=$continent[0]?></a></li>
		<?php
			}
		?>
	</ul>
	<?php
		foreach($continent_countrys as $continent=>$countrys)
		{
	?>
			<div id="<?=str_replace(" ","_",$continent)?>">
				<?php
					foreach($countrys as $country)
					{
				?>
						<div class="country" id="<?=$continent."-".$country[0]?>"><?=$country[0]?></div>
				<?php
					}
				?>
			</div>
	<?php
		}
	?>

</div>
<div id="close_tab_btn" class="close_tab_btn">Close</div>
</div>